<!-- 个人信息 -->
<template>
    <div class="profile">
        <form>
            <table>
                <tbody>
                    <tr>
                        <td colspan="2">
                            <span>个人信息</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            * 姓名
                        </td>
                        <td>
                            <input type="text" />
                        </td>
                    </tr>

                    <tr>
                        <td>
                            * 编号
                        </td>
                        <td>
                            <input type="text" />
                        </td>
                    </tr>

                    <tr>
                        <td>
                            * 性别
                        </td>
                        <td>
                            <input type="radio" name="sex" value="男" />男
                            <input type="radio" name="sex" value="女" />女
                        </td>
                    </tr>

                    <tr>
                        <td>
                            * 手机号
                        </td>
                        <td>
                            <input type="text" />
                        </td>
                    </tr>

                    <tr>
                        <td>
                            * 学校
                        </td>
                        <td>
                            <input type="text" />
                        </td>
                    </tr>

                    <tr>
                        <td>
                            * 专业
                        </td>
                        <td>
                            <input type="text" />
                        </td>
                    </tr>

                    <tr>
                        <td>
                            * 人员属性
                        </td>
                        <td class="personnel">
                            <input type="button" value="群众"/>
                            <input type="button" value="团员" />
                            <input type="button" value="党员" />
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2">
                            <input type="button" value="提交" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>

</template>

<style scoped>
.profile {
    width: 100vw;
    margin: 0.9375rem 0.75rem;
}

form {
    border-radius: 10px;
    font-size: 1rem;
    padding: 0.9375rem 0.625rem;
    background-color: #fff;
}

form span {
    font-size: 1.125rem;
}

table {
    border-spacing: 0;
    width: 100%;
}

td {
    border-bottom: 1px #ccc dashed;
    padding: 0.625rem;
}

.personnel input{
    border-radius: 10px;
    margin: 0 0.3125rem 0 0.3125rem;
    padding: 0.3125rem 0.625rem;
}

.personnel{
    padding-left: 0;
}

tr:last-child td ,tr:first-child td,input{
    border: 0;
}

tr:last-child td{
    text-align: center;
}

input[type="text"]{
    width: 100%;
}

input[type="radio"]{
    margin: 0.3125rem;
}

tr:last-child td input{
    margin: 0.9375rem 0 0 0;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background-color: rgb(70, 121, 121);
    padding: 0.375rem;
    width: 90%;
}

tr:last-child td input:hover{
    transition: all 0.5s;
    background-color: rgb(37, 97, 97);
}

tbody {
    width: 100%;
}

input {
    outline: none;
}
</style>

<script setup>

</script>